<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <span></span>
                <h3>弹出框</h3>
                <span class="del">X</span>
            </li>
            <li><span class="red1"></span><span class="red2"></span></li>
        </ul>
    </div>
    <button class="btn">按钮</button>
</body>
<script>
    class Dialog {
        constructor(el, obj) {
            this.el = document.querySelector(el);
            this.obj = obj;
            this.red1 = document.querySelector('.red1');
            this.red2 = document.querySelector('.red2');
            this.del = document.querySelector('.del');
            this.init();
            this.gong();
        }

        init() {
            this.red1.innerHTML = this.obj.content[0];
            this.red2.innerHTML = this.obj.content[1];
        }
        gong() {

        }
    }
    let dialog = new Dialog('.box', {
        title: '确定要删除吗',
        width: '400px',
        height: '200px',
        content: ['确定', '取消'],
        sureCallback() {

        }
        closeCallback() {

        }
    })
</script>

</html>